<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<% String path = request.getContextPath();%> 
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>用户验证</title>
<link href="<%=path%>/static/usercss/css/all.css?hjjssj" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="<%=path%>/static/webuploader-0.1.5/webuploader.css" />
<script type="text/javascript" src="<%=path%>/static/js/jquery-3.2.1.js"></script>
<!--[if IE]>
<script>
(function(){if(!/*@cc_on!@*/0)return;var e = "abbr,article,aside,audio,canvas,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.length;while(i--){document.createElement(e[i])}})()
</script>
<![endif]-->
<script type="text/javascript" src="<%=path%>/static/usercss/js/jquery.js"></script>
<script type="text/javascript" src="<%=path%>/static/usercss/js/jquery.innerfade.js"></script>
<script type="text/javascript">

	$(function(){
		$(".btnSwap").click(function(){
			var p = $(this).parents("dl");
			var txt = $(this).text();
			if(txt=="收起"){
				$(this).html($(this).data("title"));
				p.removeClass("open");
				p.addClass("off");
			}
			else{
				$(this).html("收起");
				$(this).data("title",txt);
				p.removeClass("off");
				p.addClass("open");
			}
			return false;
		});
	});
</script>

</head>
<body>
<jsp:include page="/WEB-INF/web/includ/header.jsp"></jsp:include>
<section>
<c:set value="${requestScope.users }" var="users"></c:set>
<div class="wrap">
<div class="section">
    <article class="us">
      <div class="title">
      <img src="<%=path%>/static/head_img/${users.headName }" alt="用户昵称">
      <h1>用户信息</h1>
    </div>
    <div class="main">
      <dl>
        <dt>用户名:</dt>
        <dd>${users.name }(${sessionScope.userinfo.usertype.type })</dd>
      </dl>
      <dl class="off">
        <dt>邮箱:</dt>
        <dd>${users.mailBox }</dd>
        <dd>
            <a  href="#" class="btnSwap">更换</a>
        </dd>
        <dd class="modify">
          <form id="mailForm" action="<%=path %>/web/userinfo/updateMailById" method="post">
          <dl>
            <dt>原邮箱</dt>
            <dd><span>${users.mailBox }</span></dd>
            <dd><input class="validate" type="button" name="submitYuanMailCode" id="submitYuanMailCode" value="申请验证"></dd>
          </dl>
          <dl>
            <dt>原邮箱验证码</dt>
            <dd><input id="yuanMailCode" style="text" name="yuanMailCode" aria-label="原邮箱收到的验证码" placeholder="原邮箱收到的验证码" ></dd>
            <dd><input id="yuanCode" name="yuanCode" type="hidden" value=""/></dd>
          </dl>
          <dl>
            <dt>新邮箱</dt>
            <dd><input style="text" name="newemail" aria-label="输入新的邮箱地址" placeholder="输入新的邮箱地址" ></dd>
            <dd><input class="validate" type="button" name="submitNewMailCode" id="submitNewMailCode" value="申请验证"></dd>
          </dl>
          <dl>
            <dt>新邮箱验证码</dt>
            <dd><input id="newMailCode" style="text" name="newMailCode" aria-label="新邮箱收到的验证码" placeholder="新邮箱收到的验证码" ></dd>
            <dd><input id="newCode" name="newCode" type="hidden" value=""/></dd>
          </dl>
          
          <div class="submit">
            <input class="validate" type="submit" name="submit" id="submit1" value="更换邮箱">
          </div>
          </form>
        </dd>
      </dl>
      <dl class="off">
        <dt>手机:</dt>
        <dd>${requestScope.phoneNew } </dd>
        <dd>
            <a  href="#" class="btnSwap">更换</a>
        </dd>
        <dd class="modify">
          <form id="phoneForm" action="<%=path %>/web/userinfo/updatePhoneById" method="get">
          <dl>
            <dt>原号码</dt>
            <dd><span>${requestScope.phoneNew } </span></dd>
            <dd><input type="hidden" value=${users.mailBox } /></dd>
            <dd><input class="validate" type="button" name="submitPhoneCode" id="submitPhoneCode" value="邮箱验证"></dd>
          </dl>
          <dl>
            <dt>邮箱验证码</dt>
            <dd><input style="text" name="phoneCode" id="phoneCode" aria-label="原邮箱收到的验证码" placeholder="原邮箱收到的验证码" ></dd>
            <dd><input id="pCode" name="pCode" type="hidden" value=""/></dd>
          </dl>
          <dl>
            <dt>新手机</dt>
            <dd><input style="text" name="newPhone" id="newPhone" aria-label="输入新的手机号码 " placeholder="输入新的手机号码 " ></dd>
            
          </dl>
          <div class="submit">
            <input class="validate" type="submit" name="submit" id="submit2" value="更换手机号码">
          </div>
          </form>
        </dd>
      </dl>
      <dl class="off">
        <dt>头像:</dt>
        <dd><img src="<%=path %>/static/head_img/${users.headName }" ></dd>
        <dd><a href="#" class="btnSwap">更换</a></dd>
        <dd class="modify">
          <form id="headForm" action="<%=path %>/web/userinfo/updateHeadNameById" method="get">
           <div class="row cl">
						<div id="uploader-demo">
				            <!--用来存放item-->
				            <label class="form-label col-xs-4 col-sm-2">缩略图：</label>
										<div class="formControls col-xs-8 col-sm-9">
										<div class="uploader-thum-container">
				            <div id="fileList" class="uploader-list"></div>
				            <div id="upInfo" ></div> 
				            <div id="filePicker" >选择图片</div>
				        		</div>
				        	</div>
				        <input type="hidden" id="icon" name="icon">
				        <input type="hidden" name="id" value="${param.id }">
						</div> 
						</div> 
            <div style="margin-left:-0px;" class="submit">
            <input  class="validate" id="btn1"  type="submit" name="submit"  value="更换头像">
          </div> 
          </form>
        </dd>
      </dl>
      <dl class="off">
        <dt>代表单位:</dt>
        <c:if test="${users.approvePic==null }">
       	 <dd>未认证</dd>
       	 <dd><a href="#" class="btnSwap">认证</a></dd>
        </c:if>
        <c:if test="${users.approvePic!=null }">	        		
					<c:if test="${!users.approveStatus }">
	       	 <dd>待认证</dd>
	        </c:if>
       		<c:if test="${users.approveStatus }">
       			<c:if test="${users.usertype.id==1 }">
			       	 <dd>认证未通过，请再次认证</dd>
			       	 <dd><a href="#" class="btnSwap">认证</a></dd>
			      </c:if>
			      <c:if test="${users.usertype.id!=1 }">
			       	 <dd>已认证</dd>
			       	 <dd><a href="#" class="btnSwap">更改认证</a></dd>
			      </c:if>
	        </c:if>
         </c:if>
      
        
        <dd class="modify">
          <form id="companyForm" action="<%=path %>/web/userinfo/updateCompanyById" method="post">
          <dl>
          <dt>选择用户类型</dt>
          <select name="requestType.id" id="userType">
		         <c:forEach items="${requestScope.usertypes}" var="userType" begin="1" step="1">
						 		<option value="${userType.id}" >${userType.type }</option>
						 </c:forEach>
          </select>
           </dl>
          <dl>
            <dt>代表企业名称</dt>
            <dd><input type="text" name="companyName" id="companyName">
            <input type="hidden" name="id" value="${sessionScope.userinfo.id }">
            </dd>
          </dl>
          <dl>
            <dt>代表企业地址</dt>
            <dd><input type="text" name="companyAddress" id="companyAddress"></dd>
          </dl>
          <dl>
            <dt>证明文件照片</dt>
            <div id="upInfo1" ></div>
            <div id="filePickers" >选择图片</div>
            
          </dl>
          <div class="submit">
            <input class="validate" id="btn2" type="submit" name="submit"  value="提交认证">
          </div>
          </form>
        </dd>
      </dl>
      <dl class="off">
        <dt>密码管理:</dt>
        <dd><a  href="#" class="btnSwap">修改密码</a></dd>
        <dd class="modify">
          <form id="passForm" action="<%=path%>/web/userinfo/updatePasswordById" method="get">
          <dl>
            <dt>旧密码</dt>
            <dd><input id="oldPass" type="password" name="oldPass" aria-label="输入旧密码" placeholder="输入旧密码" ></dd>
          </dl>
          <dl>
            <dt>新密码</dt>
            <dd><input id="newPass" type="password" name="newPass" aria-label="输入新密码" placeholder="输入新密码" ></dd>
          </dl>
          <dl>
            <dt>重复新密码</dt>
            <dd><input id="newPass2" type="password" name="newPass2" aria-label="再输入新密码" placeholder="再输入新密码" ></dd>
          </dl>
          <div class="submit">
            <input class="validate" type="submit" name="submit" id="submit3" value="更新密码">
          </div>
          </form>
        </dd>
      </dl>
      <dl>
        <dt>上次登录：</dt>
        <dd><span><fmt:formatDate value="${users.lastTime }" pattern="yyyy-MM-dd HH:mm:ss"/></span>&emsp;<span>IP地址：${users.lastIP }</span></dd>
      </dl>
      <dl>
        <dt>文章数量：</dt>
        <dd><span>${users.publishCount }</span></dd>
      </dl>
      <dl>
        <dt>问题数量：</dt>
        <dd><span>${users.questionCount } </span><!-- <span>答复：15次，采纳1次</span> --></dd>
      </dl>
      <dl>
        <dt>回答数量：</dt>
        <dd><span>${users.answerCount } </span><!-- <span>答复：15次，采纳1次</span> --></dd>
      </dl>
    </div>
  </article> 
 
 <jsp:include page="/WEB-INF/web/includ/aside.jsp"></jsp:include>
 
</div>
</div>
</section>
  <jsp:include page="/WEB-INF/web/includ/footer.jsp"></jsp:include>



<script type="text/javascript" src="<%=path%>/static/managecss/lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="<%=path%>/static/managecss/lib/jquery.validation/1.14.0/jquery.validate.js"></script> 
<script type="text/javascript" src="<%=path%>/static/managecss/lib/jquery.validation/1.14.0/validate-methods.js"></script> 
<script type="text/javascript" src="<%=path%>/static/managecss/lib/jquery.validation/1.14.0/messages_zh.js"></script> 
<script type="text/javascript" src="<%=path%>/static/webuploader-0.1.5/webuploader.min.js"></script> 
<script type="text/javascript" src="<%=path%>/static/managecss/lib/layer/2.4/layer.js"></script>
<script type="text/javascript">
	
	if("${users.usertype.type }"!="${sessionScope.userinfo.usertype.type}"){
		$.post("<%=path%>/web/userinfo/changeUserinfo",
				{},
				function(){
				location.href = location.href;
		})
	}


	
$(function(){
	
	$("#headForm").submit(function() {
		if($("#imgPath").val()==undefined){
			return false;
		}else{
			return true;
		}
	})
	
	var msg = "${param.msg}";
	if(msg=="common"){
			alert("您不是企业用户，请先申请企业用户！")
	}
	
	$("#mailForm").validate({
		rules:{
			
				yuanMailCode:{
					required:true,
				},
				newemail:{
						email:true,
						required:true,
						
					},
				newMailCode:{
					required:true,				
				}	
				
				
			},
			errorPlacement: function(error, element) {                             
				error.appendTo( element.parent() );                            
			},
			onkeyup:false,
			focusCleanup:true,
			success:"valid"
	});	
	$("#phoneForm").validate({
		rules:{
				phoneCode:{
					required:true,				
				},
				newPhone:{
					required:true,
					minlength:11,
					maxlength:11
				}
				
			},
			errorPlacement: function(error, element) {                             
				error.appendTo( element.parent() );                            
			},
			onkeyup:false,
			focusCleanup:true,
			success:"valid"
	});	
	$("#companyForm").validate({
		rules:{
			companyName:{
					required:true,				
				},
				companyAddress:{
					required:true,
				
				}
				
			},
			errorPlacement: function(error, element) {                             
				error.appendTo( element.parent() );                            
			},
			onkeyup:false,
			focusCleanup:true,
			success:"valid"
	});	
	
	$("#passForm").validate({
		rules:{
			oldPass:{
					required:true,				
				},
				newPass:{
					required:true,
					minlength:6,					
				},
				newPass2:{
					required:true,
					minlength:6,	
					equalTo:"#newPass"
				}
				
			},
			errorPlacement: function(error, element) {                             
				error.appendTo( element.parent() );                            
			},
			onkeyup:false,
			focusCleanup:true,
			success:"valid"
	});	
	var z = true;
	$("#oldPass").blur(function() {
		var password = $(this).val();
		$.ajax({
			type:'post',
			url:'<%=path%>/web/userinfo/getPassword',
			data:{password:password},
			success: function(mes) {
				
				if(!mes){
					alert("密码输入错误");
					z=false;
				}
			}
			
		})
		
		
	})
	$("#passForm").submit(function(e){
		if(z==false){
			alert("密码输入错误");
		}
		
			  return z;
		});
		
	

	
	
	$("#submitYuanMailCode").click(function(){
	
		 var mailBox = $(this).parent().prev().find("span").html();
		

		$.post("<%=path%>/web/userinfo/checkMail",
				{mailBox:mailBox},
				function(code){
					if(code!=null){
						alert("验证码发送成功");
						 $("#yuanCode").val(code);
					}else{
						alert("验证码发送失败，请重试");
					}}
		); 
	})
	
	$("#submitNewMailCode").click(function(){
		var mailBox = $(this).parent().prev().find("input").val();
	/* 	alert(mailBox) */
		
		$.post("<%=path%>/web/userinfo/checkMail",
				{mailBox:mailBox},
				function(code){
					if(code!=null){
						alert("验证码发送成功");
						$("#newCode").val(code);
					}else{
						alert("验证码发送失败，请重试");
					}}
		); 
	})
	
	$("#submitPhoneCode").click(function(){
		var mailBox = $(this).parent().prev().find("input").val();

		
		$.post("<%=path%>/web/userinfo/checkMail",
				{mailBox:mailBox},
				function(code){
					if(code!=null){
						alert("验证码发送成功");
						$("#pCode").val(code);
					}else{
						alert("验证码发送失败，请重试");
					}}
		); 
	})
	
});
var x=true;
	$(function() {
		$("#yuanMailCode").blur(function() {
			var yuanCode = $("#yuanCode").val();
			var yuanMailCode = $("#yuanMailCode").val();
			 
				if(yuanCode.toLowerCase() == yuanMailCode.toLowerCase())
				{
				
					x=true;					
				}
				else{
					alert("验证码错误");
					x=false;				
				}	
				 	
		});
	});
	
	$(function() {
		$("#newMailCode").blur(function() {
			var newCode = $("#newCode").val();
			var newMailCode = $("#newMailCode").val();
			 
				if(newCode.toLowerCase() == newMailCode.toLowerCase())
				{
				
					x=true;					
				}
				else{
					alert("验证码错误");
					x=false;				
				}	
				 	
		});
	});
	$("#mailForm").submit(function(e){
		
		  return x;
	});	

	var y = true;
	$(function() {
		$("#phoneCode").blur(function() {
			var pCode = $("#pCode").val();
			var phoneCode = $("#phoneCode").val();
			 
				if(pCode.toLowerCase() == phoneCode.toLowerCase())
				{
				
					y=true;					
				}
				else{
					alert("验证码错误");
					y=false;				
				}	
				 	
		});
	});
	
				$("#phoneForm").submit(function(e){
			
			  return y;
		});
		
		
/* 图片上传  */	
jQuery(function() {

    var $ = jQuery,
        $list = $('#fileList'),
        // 优化retina
        ratio = window.devicePixelRatio || 1,
        // 缩略图大小
        thumbnailWidth = 100 * ratio,
        thumbnailHeight = 100 * ratio,
        // Web Uploader实例
        uploader;

        // 初始化Web Uploader
        uploader = WebUploader.create({
        // 自动上传。
        auto: true,
        // swf文件路径
        swf:'<%=path%>/static/webuploader-0.1.5/Uploader.swf',
        // 文件接收服务端。
        server: '<%=path%>/web/userinfo/changeHead?str=headName',
        fileNumLimit:'1',  //文件总数量只能选择1个 

        // 选择文件的按钮。可选。
        pick: {
            id:'#filePicker',  //选择文件的按钮
            multiple:false, 
            label: '点击选择图片'
               },   
     // 图片质量，只有type为`image/jpeg`的时候才有效。
        quality: 90,

        //限制传输文件类型，accept可以不写 
        accept: {
            title: 'Images',//描述
            extensions: 'gif,jpg,jpeg,png',//类型
            mimeTypes: '.gif,.jpg,.jpeg,.png'//mime类型
        }
    });


 // 当有文件添加进来的时候，创建img显示缩略图使用
     uploader.on( 'fileQueued', function( file ) {
        var $li = $(
                '<div id="' + file.id + '" class="file-item thumbnail">' +
                    '<img>'  +
                '</div>'
                ),
            $img = $li.find('img');

        // $list为容器jQuery实例
        $list.empty();
        $list.append( $li );

        // 创建缩略图
        // 如果为非图片文件，可以不用调用此方法。
        // thumbnailWidth x thumbnailHeight 为 100 x 100
        uploader.makeThumb( file, function( error, src ) {
            if ( error ) {
                $img.replaceWith('<span>不能预览</span>');
                return;
            }
            $img.attr( 'src', src );
        }, thumbnailWidth, thumbnailHeight );
    }); 

  // 文件上传过程中创建进度条实时显示。    uploadProgress事件：上传过程中触发，携带上传进度。 file文件对象 percentage传输进度 Nuber类型
    uploader.on( 'uploadProgress', function( file, percentage ) {
        var $li = $( '#'+file.id ),
            $percent = $li.find('.progress span');

        // 避免重复创建
        if ( !$percent.length ) {
            $percent = $('<p class="progress"><span></span></p>')
                    .appendTo( $li )
                    .find('span');
        }

        $percent.css( 'width', percentage * 100 + '%' );
    });

    // 文件上传成功时候触发，给item添加成功class, 用样式标记上传成功。 file：文件对象，response：服务器返回数据
    uploader.on( 'uploadSuccess', function( file,response) {
        $( '#'+file.id ).addClass('upload-state-done');
        //console.info(response);
      $("#upInfo").html("<input type='hidden' id='imgPath' color='red' value="+response._raw+" name='headName'/>");
      $("#icon").val(response._raw);
      layer.msg("上传成功");

    });

    // 文件上传失败                                file:文件对象 ， code：出错代码
    uploader.on( 'uploadError', function(file,code) {
        var $li = $( '#'+file.id ),
            $error = $li.find('div.error');

        // 避免重复创建
        if ( !$error.length ) {
            $error = $('<div class="error"></div>').appendTo( $li );
        }

        $error.text('上传失败! ');
    });

    // 不管成功或者失败，文件上传完成时触发。 file： 文件对象
    uploader.on( 'uploadComplete', function( file ) {
        $( '#'+file.id ).find('.progress').remove();
    });

 // 所有文件上传成功后调用        
    uploader.on('uploadFinished', function () {
        //清空队列
         uploader.reset();
    });
  //只允许上传一个，每次文件加入队列前触发
    uploader.on('beforeFileQueued',function(){
        uploader.reset();
        uploader.refresh();
    });

    //绑定提交事件
    $("#btn").click(function() {
        console.log("上传...");
        uploader.upload();   //执行手动提交
      });
 
});
jQuery(function() {

    var $ = jQuery,
        $list = $('#fileList'),
        // 优化retina
        ratio = window.devicePixelRatio || 1,
        // 缩略图大小
        thumbnailWidth = 100 * ratio,
        thumbnailHeight = 100 * ratio,
        // Web Uploader实例
        uploader;

        // 初始化Web Uploader
        uploader = WebUploader.create({
        // 自动上传。
        auto: true,
        // swf文件路径
        swf:'<%=path%>/static/webuploader-0.1.5/Uploader.swf',
        // 文件接收服务端。
        server: '<%=path%>/web/userinfo/changeHead?str=company',
        fileNumLimit:'1',  //文件总数量只能选择1个 

        // 选择文件的按钮。可选。
        pick: {
            id:'#filePickers',  //选择文件的按钮
            multiple:false, 
            label: '点击选择图片'
               },   
     // 图片质量，只有type为`image/jpeg`的时候才有效。
        quality: 90,

        //限制传输文件类型，accept可以不写 
        accept: {
            title: 'Images',//描述
            extensions: 'gif,jpg,jpeg,png',//类型
            mimeTypes: '.gif,.jpg,.jpeg,.png'//mime类型
        }
    });


 // 当有文件添加进来的时候，创建img显示缩略图使用
     uploader.on( 'fileQueued', function( file ) {
        var $li = $(
                '<div id="' + file.id + '" class="file-item thumbnail">' +
                    '<img>'  +
                '</div>'
                ),
            $img = $li.find('img');

        // $list为容器jQuery实例
        $list.empty();
        $list.append( $li );

        // 创建缩略图
        // 如果为非图片文件，可以不用调用此方法。
        // thumbnailWidth x thumbnailHeight 为 100 x 100
        uploader.makeThumb( file, function( error, src ) {
            if ( error ) {
                $img.replaceWith('<span>不能预览</span>');
                return;
            }
            $img.attr( 'src', src );
        }, thumbnailWidth, thumbnailHeight );
    }); 

  // 文件上传过程中创建进度条实时显示。    uploadProgress事件：上传过程中触发，携带上传进度。 file文件对象 percentage传输进度 Nuber类型
    uploader.on( 'uploadProgress', function( file, percentage ) {
        var $li = $( '#'+file.id ),
            $percent = $li.find('.progress span');

        // 避免重复创建
        if ( !$percent.length ) {
            $percent = $('<p class="progress"><span></span></p>')
                    .appendTo( $li )
                    .find('span');
        }

        $percent.css( 'width', percentage * 100 + '%' );
    });

    // 文件上传成功时候触发，给item添加成功class, 用样式标记上传成功。 file：文件对象，response：服务器返回数据
    uploader.on( 'uploadSuccess', function( file,response) {
        $( '#'+file.id ).addClass('upload-state-done');
        //console.info(response);
      $("#upInfo1").html("<input type='hidden' id='approvePic' color='red' value="+response._raw+" name='approvePic'/>");
      $("#icon").val(response._raw);
      layer.msg("上传成功");

    });

    // 文件上传失败                                file:文件对象 ， code：出错代码
    uploader.on( 'uploadError', function(file,code) {
        var $li = $( '#'+file.id ),
            $error = $li.find('div.error');

        // 避免重复创建
        if ( !$error.length ) {
            $error = $('<div class="error"></div>').appendTo( $li );
        }

        $error.text('上传失败! ');
    });

    // 不管成功或者失败，文件上传完成时触发。 file： 文件对象
    uploader.on( 'uploadComplete', function( file ) {
        $( '#'+file.id ).find('.progress').remove();
    });

 // 所有文件上传成功后调用        
    uploader.on('uploadFinished', function () {
        //清空队列
         uploader.reset();
    });
  //只允许上传一个，每次文件加入队列前触发
    uploader.on('beforeFileQueued',function(){
        uploader.reset();
        uploader.refresh();
    });

    //绑定提交事件
    $("#btn").click(function() {
        console.log("上传...");
        uploader.upload();   //执行手动提交
      });
 
});
</script>
</body>
</html>
